<%@ page import="java.io.*,java.util.*" language="java"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>



<html>
<link href="css/style.css" rel="stylesheet" type="text/css" />

<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
	height: 100%
}

body {
	height: 100%;
	margin: 0;
	padding: 0
}

#map_canvas {
	height: 100%
}
</style>
<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDrrgNfqrX8_ifFLZsrvnBqE4Ne6KCpRhU&sensor=true&libraries=places">
	
</script>
<script type="text/javascript"
	src="http://code.jquery.com/jquery-1.8.2.min.js ">
	
</script>
<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
	
</script>
<script type="text/javascript"
	src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js ">
	
</script>
<script
	src="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.js "></script>
<link rel="stylesheet"
	href="http://xoxco.com/projects/code/tagsinput/jquery.tagsinput.css ">

<script type="text/javascript">
	var lat = '${report.latitude}';
	var lon = '${report.longitude}';

	function initialize() {
		var location = new google.maps.LatLng(lat, lon);
		var mapOptions = {
			center : location,
			zoom : 16,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map_canvas"),
				mapOptions);
		placeMarker(location);
		google.maps.event.addDomListener(window, 'load', initialize);

		var marker;

		function placeMarker(location) {

			if (marker) {
				marker.setPosition(location);
			} else {
				marker = new google.maps.Marker({
					position : location,
					map : map,
					draggable : false
				});
				var infowindow = new google.maps.InfoWindow({
					content : 'name of report'

				});
				google.maps.event.addListener(marker, 'click', function() {
					infowindow.open(map, marker);
				});

			}
		}
	}
</script>

<%
	//<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
%>
<script>
	$(function() {
		$('#tags').tagsInput();
	});
</script>
<style type="text/css">
body {
	margin: 0;
}

p {
	color: crimson;
}
</style>
<script language="JavaScript" type="text/javascript">
	function validateUser() {
		var error = "Please register to make comments!";
		if ((request.getAttribute("userID") == -1)) {
			alert(error);
			return false;
		} else {
			return true;
		}
	}
</script>
<script>
	function validatePage() {
		var error = "";

		if (document.getElementById("user").value == "") {
			error = error + "Please enter the username.\n";
		}
		if (document.getElementById("pass").value == "") {
			error = error + "Please enter the password.\n";
		}
		if (error != "") {
			alert(error);
			return false;
		} else {
			return true;
		}
	}
</script>
<title>View Report</title>
</head>
<body background="images/background.jpg" onload="initialize()">
	<form name="dummy" action="ViewPage" method="post">
		<input type="hidden" name="id"
			value="<%=request.getAttribute("reportID")%>">

		<div class="header">
			<div class="wrapper">
				<div class="logo">
					<img src="images/banner.jpg" alt="" />
				</div>
				<%
					if (session.getAttribute("userName") != null) {
				%>
				<div class="login user">

					<div class="form-input" style="margin-right: 0">
						<p>
							Hi,
							<%=session.getAttribute("userName")%></p>
						<input type="submit" name="button" value="Logout" />
					</div>

				</div>

				<%
					}

					else {
				%>

				<div class="login">
					<div>
						<c:if test="${invalidLogin == true}">
							<p style="color: red">
								<b>Your username or password is incorrect.</b>
							</p>
						</c:if>
					</div>
					<div class="form-input">
						<label>Username</label> <input name="name" type="text" id="user"
							value="" />
					</div>
					<div class="form-input">
						<label>Password</label> <input name="password" type="password"
							id="pass" value="" />
					</div>
					<div class="form-input">
						<input name="button" type="submit" value="Login"
							onclick="return validatePage();">
					</div>
					<div class="form-input" style="margin-right: 0">
						<input name="button" type="submit" value="Not A Member?">
					</div>

				</div>

				<%
					}
				%>
			</div>
		</div>

		<div class="content">
			<div class="wrapper">

				<div class="leftmenu">
					<ul>
						<li><a href="default.jsp">Home Page</a></li>

						<%
							if (session.getAttribute("userName") != null) {
						%>
						<li><a href="homeMember.jsp">Profile Page</a></li>
						<li><a href="addReport.jsp">Add Report</a></li>
						<%
							}
						%>

						<li><a href="searchPage.jsp">Search For a Report</a></li>

					</ul>
				</div>

				<div class="centercol">
					<h3>Report Details</h3>
					<ul class="list">

						<li>You can rate up/down a report according to its
							correctness or subscribe to a report.</li>
						<li>To validate new tags, comments and status change, 
							you should click on "Submit Changes" button.</li>
						
					</ul>
					<table class="report-view">

						<tr>
							<td width="120" class="bold"><p></p>Report Name</td>
							<td width="20" class="bold">:</td>
							<td width="370">${report.reportName}</td>
						</tr>
						<tr>
							<td><br></td>
						</tr>
						<tr>
							<td width="120" class="bold"><p></p>Violation Type</td>
							<td width="20" class="bold">:</td>
							<td width="370">${obsName}</td>
						</tr>
						<tr>
							<td><br></td>
						</tr>

						<%--	<tr>

							<td width="120" class="bold"><p></p>Description</td>
							<td width="20" class="bold">:</td>

							 <c:if test="${isGuest != true}">
								<c:if test="${report.description == '' }">
            						<td>Add description</td>
  									<td><textarea name="reportDescription" id="reportDescription"
													style="width: 305px; height: 110px"/></textarea>
									</td>
								</c:if> 
							</c:if> 
						
						</tr> 	--%>

						<tr>
							<td width="120" class="bold"><p></p>Description</td>
							<td width="20" class="bold">:</td>
							<c:if test="${isGuest != true}">
								<c:choose>
									<c:when test="${report.description == ''}">

										<td class="tag"><textarea name="reportDescription"
												id="reportDescription" style="width: 305px; height: 110px" /></textarea>
										</td>

									</c:when>
									<c:otherwise>
										<td width="370">${report.description}</td>
									</c:otherwise>
								</c:choose>
							</c:if>
							<c:if test="${isGuest == true}">
								<td width="370">${report.description}</td>
							</c:if>
						</tr>

						<tr>
							<td><br></td>
						</tr>
						<tr>
							<td width="120" class="bold"><p></p>Tags</td>
							<td width="20" class="bold">:</td>
							<td width="370"><c:forEach var="tg" items="${tagsShow}">
									<c:out value="*${tg}" />
								</c:forEach></td>
						</tr>

						<c:if test="${isGuest != true}">
							<tr>
								<td><br></td>
							</tr>
							<tr>
								<td class="tag" width="120">Add Tags</td>
								<td class="tag" width="20">:</td>
								<td width="11"><input type="text" name="tags" id="tags"
									class="tags" style="display: none; width: 150px;" /></td>
							</tr>

						</c:if>
						<tr>
							<td><br></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td width="120" class="bold"><p></p>Status</td>
							<td width="20" class="bold">:</td>
							<td width="370"><c:if test="${isGuest != true}">
									<c:if test="${status == 'Detected' }">
										<select name="status">
											<option selected value="Detected">Detected</option>
											<option value="InProgress">In Progress</option>
											<option value="Fixed">Fixed</option>
										</select>
									</c:if>
									<c:if test="${status == 'InProgress' }">
										<select name="status">
											<option selected value="InProgress">In Progress</option>
											<option value="Fixed">Fixed</option>
										</select>
									</c:if>
									<c:if test="${status == 'Fixed' }">
										${status}
									</c:if>
								</c:if> <c:if test="${isGuest == true}">
								${status}
								</c:if></td>
						</tr>
						<tr>
							<td><br></td>
						</tr>
						<tr>
							<td width="120" class="bold"><p></p>Created By</td>
							<td width="20" class="bold">:</td>
							<td width="370">${user.username}</td>
						</tr>
						<tr>
							<td><br></td>
						</tr>
						<tr>
							<td width="120" class="bold"><p></p>Created Date</td>
							<td width="20" class="bold">:</td>
							<td width="370">${report.created_on}</td>
						</tr>

						<%
							if (((Integer) request.getAttribute("imageNum")) >= 1)

							{
						%>
						<tr>
							<td><br></td>
						</tr>
						<tr>


							<td width="120" class="tag"><p></p>Image</td>
							<td width="20" class="tag">:</td>
							<td class="tag">

								<div>

									<%
										for (int i = 1; i <= (Integer) request.getAttribute("imageNum"); i++) {
												System.out.println(request.getAttribute("reportID") + "_"
														+ i);
									%>
									<img
										src="image/<%=request.getAttribute("reportID") + "_" + i
							+ ".jpg"%>">
									<%
										}
									%>
								</div>
							</td>

						</tr>
						<%
							}
						%>
						<tr>
							<td><br></td>
						</tr>
						<%--
						<c:if test="${isGuest != true}">
							<tr>
								<td width="130" class="tag">Add Image</td>
								<td width="10">:</td>
								<td width="300" class="col2"><input type="file"
									name="image" value="image" /></td>

							</tr>
						</c:if>
						--%>
						<tr>
							<td width="120" class="bold"><p></p>Rate</td>
							<td width="20" class="bold">:</td>
							<td width="170">${report.rate}</td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td><c:if test="${isGuest != true}">
									<c:out value=""></c:out>
									<c:choose>
										<c:when test="${subsStatus != true}">
											<input class="btn-add" type="submit" name="button"
												value="Subscribe!">

										</c:when>
										<c:otherwise>
											<input class="btn-add" type="submit" name="button"
												value="Unsubscribe!">

										</c:otherwise>
									</c:choose>

									<input class="btn-left" type="submit" name="button" value="Up">
									<input class="btn-left" type="submit" name="button"
										value="Down">
								</c:if></td>
						</tr>

						<tr>
							<td><br></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td><c:if test="${invalid == true}">
									<p style="color: red">
										<b>You have voted this report before!</b>
									</p>

								</c:if> <c:if test="${owninvalid == true}">
									<p style="color: red">
										<b>You are not allowed to vote your own report!</b>
									</p>

								</c:if></td>
						</tr>





					</table>



					<h3>Report Comments</h3>

					<c:forEach var="cmnt" items="${comments}">
						<div class="comment-item">

							${cmnt.getText()}<span>${cmnt.getCreatedOn()}</span>
						</div>
					</c:forEach>
					<br>

					<c:if test="${isGuest != true}">
						<c:out value=""></c:out>Enter Your Comments:<br>
						<textarea wrap="virtual" name="Comments" rows=3 cols=50
							maxlength=100></textarea>

						<input class="btn-left" type="submit" name="button"
							value="Submit Changes">

					</c:if>

				</div>
				<div class="rightcol subscribed maps">
					<h3>Location</h3>
					
					<div id="map_canvas" style="width: 420px; height: 500px"></div>

				</div>
			</div>
		</div>

	</form>
</body>
</html>